<template>
  <el-main class="bg table_wrap forum">
	 <div class='div-form'>
      <el-form
        ref="elFormRef"
        :model="formInline"
        label-width="90px"
        :style="{ width: '100%' }"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="5">
			<el-form-item label="标题">
				<el-input v-model="formInline.title"></el-input>
			</el-form-item>
          </el-col>
          <el-col :span="5">
			<el-form-item label="标签">
				<el-input v-model="formInline.tag"></el-input>
			</el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="分类">
              <el-select
                v-model="formInline.type"
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择"
              >
			  <el-option v-for="(o,i) in list_forum_type" :value="o.name" :key="i" :label="o.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <baseTable  :tableColumns="columns"  requestApi='/api/forum/get_list' 
	 :isShowSelect="true" 
	 :vm="vm" 
   listTpye='2'
	  v-model:isRefresh="isRefresh" 
	  :otherParams="formInline"
	 @handleSelectionChange="handleSelectionChange"
	 @handleCurrentChangeNew="handleCurrentChangeNew"
	 >
     <!-- 头部按钮 -->
	    <template #baseHeadFunt>
			<el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset(true)">重置</el-button>
          <!-- <el-button  v-if="user_group == '管理员' || $check_action('/forum/view')" @click="router.push('./view?')" class="search_btn_del">添加</el-button> -->
          <el-button  v-if="user_group == '管理员' || $check_action('/forum/table','del')" class="search_btn_del" type="danger" @click="delInfo()">删除</el-button>
		</template>
    <!-- 操作 -->
    <template #baseTableFunt="{ scope }">
		    <el-button type="primary"  v-if="user_group == '管理员' || $check_action('/forum/table','set')" size="small" @click="router.push('./view?forum_id='+scope.row.forum_id)">详情</el-button>
			<el-button type="primary"  size="small" v-if="user_group == '管理员' || $check_action('/forum/table','set')" @click="router.push('../comment/table?size=10&page=1&source_table=forum&source_field=' + field + '&source_id=' + scope.row[field])">查看评论</el-button>
		</template>
    <template #baseTableFunt2="{ scope }">
		    <el-button type="primary"  v-if="user_group == '管理员' || $check_action('/forum/table','set')" size="small" @click="router.push('./view?forum_id='+scope.forum_id)">详情</el-button>
			<el-button type="primary"  size="small" v-if="user_group == '管理员' || $check_action('/forum/table','set')" @click="router.push('../comment/table?size=10&page=1&source_table=forum&source_field=' + field + '&source_id=' + scope[field])">查看评论</el-button>
		</template>
		<template #tableContent="{ scope, column }">
        <span v-if="column.prop === 'img'">
          <el-image
          :preview-teleported="true"
          style="width: 60px; height: 60px"
          :src="$fullUrl($banseUrl,scope.row.img)"
          :preview-src-list="[$fullUrl( $banseUrl,$banseUrl,scope.row.img)]"
          :initial-index="0"
          fit="cover"
          >
		     </el-image>
		   </span> 
       <span v-if="column.prop === 'create_time'">{{ formatDate(scope.row.create_time) }}</span> 
        <span v-if="column.prop === 'update_time'">{{ formatDate(scope.row.update_time) }}</span> 
      </template>
		<template #tableContent2="{ scope, column }">
     <!-- <span v-if="column.prop === 'img'">
      {{ column.label }}：
          <el-image
          :preview-teleported="true"
          style="width: 60px; height: 60px"
          :src="$fullUrl($banseUrl,scope.img)"
          :preview-src-list="[$fullUrl( $banseUrl,scope.img)]"
          :initial-index="0"
          fit="cover"
          >
		   </el-image>
		</span>  -->
       <span v-if="column.prop === 'create_time'"> {{ column.label }}：{{ formatDate(scope.create_time) }}</span> 
        <span v-if="column.prop === 'update_time'">{{ column.label }}：{{ formatDate(scope.update_time) }}</span> 
      </template>
    </baseTable>
    </el-main>
</template>
<script setup>
import { useRouter} from "vue-router";
let router = useRouter();
import {
  $get_auth,
  func,
  paramsFun,
  $fullUrl,
  formatDate,
  $banseUrl,
  $check_action,
} from "@/utils/utils.js";
import { $post, $get } from "@/api/Api.js";
import {Picture} from "@element-plus/icons-vue";
import { ElMessage} from "element-plus";
import { ref,toRefs,computed,onMounted} from "vue"
import storageHelper from '@/libs/StorageHelper'
let user_group = storageHelper.getUserInfo().user_group;
let table=ref("forum")

let	field=ref("forum_id")
let	url_get_list=ref("/api/forum/get_list")
let	url_del=ref( "/api/forum/del?")
let vm=ref({
  img: "img",
  id: "forum_id",
  title: "title",
  description: "description",
  create_time: "create_time",
  content: "content",
  praise_len: "praise_len",
  hits: "hits",

})
// 列名
const columns =[
{ "prop": "title", "label": "标题" },
{ "prop": "img", "label": "封面图" },
{ "prop": "type", "label": "分类" },
{ "prop": "tag", "label": "标签" },
{ "prop": "create_time", "label": "创建时间" },
{ "prop": "update_time", "label": "更新时间" },
]
// 刷新table
let isRefresh = ref(false)
let list_forum_type= ref([])
//批量勾选数据框
let selectList = ref([])
//点击数据
let currentRowTableProduct = ref({})
//表格勾选回调
let handleSelectionChange = (val) => {
  console.log(val)
  selectList.value = val.map((item) => {
    if(item.forum_id!==undefined){
      return item.forum_id

    }else{
      return item

    }
    console.log(item)
  
  })
}
//点击当前行
let handleCurrentChangeNew = (val) => {
  currentRowTableProduct.value = val
}
// 头部搜索// 搜索

let formInline = ref({
	title: '',
  type: '',
  
})
// 搜索
let onSubmit = () => {
  isRefresh.value = true
}
// 重置
let onReset = (refresh) => {
  formInline.value = {
    title: '',
    type: '',
  }
  isRefresh.value = refresh
}
// 批量删除删除
let delInfo = () => {
  ElMessageBox.confirm(
    '此操作将永久删除该文件, 是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      selectList.value.map((item) => {
        delFun(item)
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
 
// 调用删除方法
let delFun= (id) => {
  $get(url_del.value+"forum_id="+id).then((json)=> {
    if (json.result) {
      ElMessage.success('删除成功');
    } else if (json.error) {
      ElMessage.error(json.error.message);
    }
    isRefresh.value = true
  });

}

//获取论坛分类
let get_forum_type= async() =>{
	let json = await $get("/api/forum_type/get_list");
	if(json.result){
	  list_forum_type.value = json.result.list;
	}
	else if(json.error){
		console.error(json.error);
	}
}
onMounted(()=>{
   get_forum_type()
})
</script>
<style lang="less" scoped>
.div-form{
padding:10px;
}
</style>